<template>
	<view class="container">
		<view class="list-area">
			<view class="list-cell" @click="navTo('/pagesA/sys/user/setUserInfo')" hover-class="cell-hover" :hover-stay-time="50">
				<text class="cell-tit">个人资料</text>
				<image src="../../../static/image/small-arrow.png" mode="aspectFit" class="arrow"></image>
			</view>
			<view class="list-cell" @click="navTo('/pagesA/sys/user/setUserSecurity')" hover-class="cell-hover" :hover-stay-time="50">
				<text class="cell-tit">账户安全</text>
				<image src="../../../static/image/small-arrow.png" mode="aspectFit" class="arrow"></image>
			</view>
			<view class="list-cell">
				<text class="cell-tit">消息推送</text>
				<switch :checked="userInfo.notificationEnabled" color="#7EAFA5" @change="switchChange" />
			</view>
			<view class="list-cell">
				<text class="cell-tit">当前版本</text>
				<text class="cell-tip">{{applicationConfig.applicationVersion}}</text>
				<!--  -->
			</view>
			<view class="list-cell" @click="navTo('/pagesA/sys/set/setAbout')" hover-class="cell-hover" :hover-stay-time="50">
				<text class="cell-tit">关于我们</text>
				<image src="../../../static/image/small-arrow.png" mode="aspectFit" class="arrow"></image>
			</view>
		</view>
		<view class="list-cell log-out-btn" @click="toLogout">退出登录</view>
	</view>
</template>

<script>
	import {  
	    mapState,mapMutations  
	} from 'vuex';
	export default {
		data() {
			return {
				
			};
		},
		computed: {
			...mapState(['hasLogin', 'userInfo','applicationConfig'])
		},
		methods:{
			...mapMutations(['logout']),

			navTo(url){
				uni.navigateTo({
					url:url
				})
			},
			//退出登录
			toLogout(){
				uni.showModal({
				    content: '确定要退出登录么',
				    success: (e)=>{
				    	if(e.confirm){
							this.$api.request.logout({
								'yyt-shop-token':this.token
							},res=>{
								console.log("res",res)
								
							})
				    		this.logout();							
							uni.removeStorageSync("userToken")
							uni.setStorageSync('authStatus', false)
				    		setTimeout(()=>{
				    			uni.navigateBack();
								
				    		}, 200)
				    	}
				    }
				});
			},
			//打开或关闭消息通知
			switchChange(e){
				let isNotificationEnabled = e.detail.value ? true: false;
				if(isNotificationEnabled)
					this.$api.request.enableNotification({
						userUuid: this.userInfo.userUuid,
					}, res => {});
				else
					this.$api.request.disableNotification({
						userUuid: this.userInfo.userUuid,
					}, res => {});
			},

		}
	}
</script>

<style lang='scss'>
	page{
		background: $page-gery-light;
	}
	.list-area{
		background: #fff;
		border-radius: 0 0 24rpx 24rpx;
		box-shadow: 0px 4px 20px 0px rgba(0,0,0,0.04);
		padding: 0 24rpx 24rpx;
	}
	.list-cell{
		display:flex;
		align-items:center;
		justify-content: space-between;
		padding: 30rpx 0;
		position:relative;
		justify-content: center;
		border-bottom: 1rpx solid #EBECF0;
		&.log-out-btn{
			border: none;
			position: fixed;
			bottom: calc(20rpx + constant(safe-area-inset-bottom));
			bottom: calc(20rpx + env(safe-area-inset-bottom));
			left: 34rpx;
			right: 34rpx;
			border-radius: 46rpx;
			height: 92rpx;
			display: flex;
			align-items: center;
			color: #999;
			justify-content: center;
			padding: 0;
			font-size: 34rpx;
			background: #fff;
		}
		&.cell-hover{
			background:#fafafa;
		}
		&.b-b:after{
			left: 30upx;
		}
		&.m-t{
			margin-top: 16upx; 
		}
		.cell-more{
			align-self: baseline;
			font-size:$font-lg;
			color:$font-color-light;
			margin-left:10upx;
		}
		.cell-tit{
			flex: 1;
			font-size: 28rpx;
			color: #111;
			margin-right:10upx;
		}
		.arrow{
			width: 20rpx;
			height: 20rpx;
		}
		.cell-tip{
			font-size: $font-base;
			color: $font-color-light;
		}
		switch{
			transform: translateX(16upx) scale(.84);
		}
	}
</style>
